<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出入校门申请管理</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">出入校门申请列表</b>
    <!--
        :data="tableData" 关联vue中的data中的tableData，后台将数据赋值给tableData，然后显示到这里
    -->
    <div>
        <el-select v-model="faculty.facultyName" placeholder="请选择学院" @change="facultyChange">
            <el-option
                    v-for="item in faculty"
                    :key="item.facultyId"
                    :label="item.facultyName"
                    :value="item.facultyId">
            </el-option>
        </el-select>
        <el-select v-model="classes.className" placeholder="请选择班级" @change="classesChange">
            <el-option
                    v-for="item in classes"
                    :key="item.classId"
                    :label="item.className"
                    :value="item.classId">
            </el-option>
        </el-select>
    </div>
    <el-table :data="tableData">
        <el-table-column align="center" type=index label="序号" prop="id" prop="userId" width="50"></el-table-column>
        <el-table-column align="center" prop="userInfo.userNumber" label="学号/工号"></el-table-column>
        <el-table-column align="center" prop="userInfo.name" label="姓名"></el-table-column>
        <el-table-column align="center" prop="userInfo.identification" label="身份证号码" width="200"></el-table-column>
        <el-table-column align="center" prop="type" label="返校/出校"></el-table-column>
        <el-table-column align="center" prop="date" label="时间"></el-table-column>
        <el-table-column align="center" prop="state" label="状态"></el-table-column>
        <el-table-column align="center" label="操作" width="200">
            <template slot-scope="props">
                <el-button type="warning" @click="Agree(props.row)" :disabled="props.row.state == '允许'">同意</el-button>
                <el-button type="danger" @click="Refuse(props.row)" :disabled="props.row.state == '驳回'">驳回</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            tableData: [],//表格数据
            faculty: [],
            classes: [],
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            otherInfo: {
                facultyId: 1,
                classId: 0
            },
        },
        methods: {
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },
            //改变学院时
            facultyChange(facultyId) {
                this.otherInfo.facultyId = facultyId;
                this.selectClasses();
                this.selectByPage();
            },
            //改变班级时
            classesChange(classesId) {
                this.otherInfo.classId = classesId;
                this.selectByPage();
            },
            //重新查找学院之下所有的班级
            selectClasses() {
                let param = "action=showClasses&facultyId=" + this.otherInfo.facultyId;
                console.log(param);
                axios.post("/EpidemicControlSystem_war_exploded/FacultyServlet", param)
                    .then(res => {
                        console.log(res.data);
                        this.classes = res.data
                    });
            },
            Agree(row){
                let param = "action=agreeApply&userId=" + row.userId  + "&OutApplyId=" + row.id;
                axios.post("/EpidemicControlSystem_war_exploded/OutApplyServlet", param)
                    .then( response => {
                        if (response.data == true) {
                            alert('修改成功');
                        } else {
                            alert('修改失败');
                        }
                        this.selectByPage();
                    });
            },
            Refuse(row) {
                let param = "action=refuseApply&userId="+ row.userId  + "&OutApplyId=" + row.id;
                axios.post("/EpidemicControlSystem_war_exploded/OutApplyServlet", param)
                    .then( response => {
                        if (response.data ==true) {
                            alert('修改成功');
                        } else {
                            alert('修改失败');
                        }
                        this.selectByPage();
                    });
            },
            //分页查询功能
            selectByPage() {
                //向后台发送请求
                axios.post("/EpidemicControlSystem_war_exploded/OutApplyServlet",
                    "action=AdminShowOut&curPage=" + this.pagination.currentPage +
                    "&pageSize=" + this.pagination.pageSize + "&facultyId=" + this.otherInfo.facultyId +
                    "&classId=" + this.otherInfo.classId)
                    .then(response => {
                        console.log(response.data);
                        //将查询出的数据赋值给tableData
                        this.tableData = response.data.outApplies;
                        console.log(this.tableData);
                        //总条数
                        this.pagination.total = response.data.count;
                    })
            },

        },
        created() {
            axios.post("/EpidemicControlSystem_war_exploded/FacultyServlet",
                "action=showFaculty")
                .then(res => {
                    this.faculty = res.data;
                    console.log(this.faculty)
                });
            //调用分页查询功能
            this.selectByPage();
        }
    });
</script>
</html>